import React, { Component } from 'react'
import { connect } from "react-redux";
import { initUserList, delUser,asyncInitUserList } from "../action/userAction";
import { userlist, userdel } from "../interface/user"
import AddUser from '../components/AddUser';
//flux

class A1 extends Component<any, any> {

  async componentDidMount() {
    if (!this.props.userList.length) {
      // let res = await userlist({}); //先获取数据
      // this.props.initUserList(res.data.list); //在调用方法
      this.props.asyncInitUserList({})
    }

  }
  render() {
    return (
      <div>
        <h1>全局的用户管理</h1>
        <AddUser></AddUser>
        <div className='table'>
          <div className='tr'>
            <div className='item'>编号</div>
            <div className='item'>用户名</div>
            <div className='item'>密码</div>
            <div className='item'>操作</div>
          </div>
          {
            this.props.userList.map((item: any) => {
              return <div className='tr' key={item._id}>
                <div className='item'>{item._id}</div>
                <div className='item'>{item.username}</div>
                <div className='item'>{item.userpwd}</div>
                <div className='item' onClick={async () => {
                  await userdel({ _id: item._id })
                  this.props.del(item._id);
                }}>删除</div>
              </div>

            })
          }
        </div>

      </div>
    )
  }
}
let a = ({ userInfo }: any) => {
  return {
    userList: userInfo.list
  }
}
let b = {
  initUserList,
  "del": delUser,
  asyncInitUserList
}

export default connect(a, b)(A1);